<template>
	<div class="productinfo-box">
		<div class="transfer-wrapper">
			<h2>关联专题</h2>
			<el-transfer
				style="text-align: left;margin-left:100px;margin-bottom:60px;"
				:data="subjectData"
				:props="{label:'title',key:'id'}"
				filterable
				filter-placeholder="请输入专题名称"
				:titles="['待选择','已选择']"
				v-model="subjectValueList"
			>
				
			</el-transfer>
			<h2>关联优选</h2>
			<el-transfer
				style="text-align: left;margin-left:100px;"
				:data="prefrenceAreaList"
				:props="{label:'name',key:'id'}"
				filterable
				filter-placeholder="请输入优选名称"
				:titles="['待选择','已选择']"
				v-model="prefrenceAreaValueList"
			>
				
			</el-transfer>
		</div>
		<div class="btn-box">
			<el-button size="small" type="primary" @click="m1(-1)">上一步，填写商品属性</el-button>
			<el-button size="small" type="primary" @click="over">完成</el-button>
		</div>
	</div>
</template>

<script>
	import {getAllPrefrence} from '@/api/prefrencearea.js'
	import {getAllSubjectList} from '@/api/subject.js'
	import {addProduct,editProduct} from '@/api/product.js'
	
	export default{
		props:['pageNum',"productinfo"],
		data(){
			return{
				subjectData:[],
				prefrenceAreaList:[],
				subjectValueList:[],
				prefrenceAreaValueList:[]
			}
		},
		mounted() {
			getAllPrefrence()
			.then(data=>{
				this.prefrenceAreaList = data.data;
			})
			getAllSubjectList()
			.then(data=>{
				this.subjectData = data.data;
			})
		},
		methods:{
			over(){
				//设置值
				this.prefrenceAreaValueList.forEach(item=>{
					this.productinfo.prefrenceAreaProductRelationList = []
					this.productinfo.prefrenceAreaProductRelationList.push(
					{
						  "id": 0,
						  "prefrenceAreaId": item,
						  "productId": 0
						
					})
				})
				this.subjectValueList.forEach(item=>{
					this.productinfo.subjectProductRelationList = []
					this.productinfo.subjectProductRelationList.push(
					{	"id": 0,
						"productId": item,
						"subjectId": 0
					})
				})
				//到底是修改还是新增
				if(this.productinfo.id == 0){
					//发送请求给后台，完成添加操作
					this.$confirm('是否确认添加商品',"确认框",{
						confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(()=>{
						addProduct(this.productinfo)
						.then(resp=>{
							console.log("resp",resp);
							this.$router.push("/pms/product")
						})	
					})
				}else{
					//发送请求给后台，完成添加操作
					this.$confirm('是否确认修改商品',"确认框",{
						confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(()=>{
						editProduct(this.productinfo)
						.then(resp=>{
							console.log("resp",resp);
							this.$router.push("/pms/product")
						})	
					})
				}
				
				
			},
			m1(num){
				//触发自定义函数
				this.$emit("changeStatus",parseInt(this.pageNum)+num);
			}
		}
	}
</script>

<style lang="scss">
	*{font-size:13px;}
	.productinfo-box{
		.btn-box{
			text-align: center;
		}
	}.transfer-wrapper{
		// border:10px solid red;
		padding-left:50px;
		margin-top:50px;
		.el-transfer__buttons{
			.el-button{
				border-radius:20%;
			}
		}
	}
</style>
